<template>
    <div>
        <div class="header">
            职员管理
        </div>
        <div class="top">
            <el-form ref="form" :model="form" label-width="80px" :inline="true">
                <el-form-item label="姓名" label-width="40px">
                    <el-input v-model="query.name" placeholder="职员名" style="width:120px" clearable></el-input>
                </el-form-item>
                <el-form-item label="职员类型">
                    <el-select v-model="query.type" placeholder="请选择" clearable style="width:130px">
                        <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-left:40px">
                    <el-button type="primary" style="width:100px" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 添加/批量删除 -->
        <div style="padding:0 25px">
            <el-button type="primary" style="width:100px" @click="dialogVisible = true">添加</el-button>
            <el-button type="danger" style="width:100px">批量删除</el-button>
        </div>
        <!-- 列表 -->
        <div style="padding:20px">
            <Table :selection="selection" :tableCols="tableCols" :tableData="tableData" :total="total"
                @pagechange="pagechange">
                <template #sex="{row}" style="width:70px">
                    <span v-if="row.sex !=0">男</span>
                    <span v-else>女</span>
                </template>
                <template #building="{row}" style="width:70px">
                    <span v-if="row.building != ''">
                        {{row.building[0].building}}
                        <el-popover placement="top-start" title="全部职务" width="100" trigger="hover">
                            <span style="display:flex" v-for="item in row.building" :key="item.id">
                                {{item.building}}
                            </span>
                            <el-link type="primary" :underline="false" slot="reference">查看全部</el-link>
                        </el-popover>
                    </span>
                    <span style="color: #bbb" v-else>暂无职务</span>
                </template>
                <template #option="{row}" style="width:70px">
                    <el-button type="success" @click="handleClick(row)">修改</el-button>
                    <el-button type="danger" @click="del(row.id)">删除</el-button>
                </template>
            </Table>
        </div>
        <!-- 添加 -->
        <div>
            <Add :dialogVisible="dialogVisible" @isclose="isclose" :handleClickdata="handleClickdata"></Add>
        </div>
    </div>
</template>

<script>
import Table from './Table/Table.vue';
import Add from '@/components/add/addstaffs.vue'
import { stafflist, stafftype } from '@/api/staffs'
export default {
    components: {
        Table,
        Add
    },
    data() {
        return {
            dialogVisible: false,
            selection: true,
            form: {

            },
            tableCols: [
                {
                    prop: "id",
                    lable: "id",
                    width: 100
                },
                {
                    prop: "name",
                    lable: "姓名",
                    width: 150
                },
                {
                    prop: "typename",
                    lable: "职员类型",
                    width: 180
                },
                {
                    // prop: "typename",
                    lable: "性别",
                    coltype: "sex",
                    slotname: "sex",
                    width: 150
                },
                {
                    prop: "cardid",
                    lable: "身份证号",
                    width: 300
                },
                {
                    prop: "mobile",
                    lable: "手机号",
                    width: 180
                },
                {
                    // prop: "typename",
                    lable: "管理小区",
                    coltype: "building",
                    slotname: "building",
                    width: 400
                },
                {
                    // prop: "typename",
                    lable: "操作",
                    coltype: "option",
                    slotname: "option",
                    width: 200
                },
            ],
            tableData: [],
            total: 0,
            query: {
                page: 1,
                psize: 5,
                key: ""
            },
            type: [],
            handleClickdata:{}
        }
    },
    created() {
        // 职员列表
        this.getstafflist()
        // 职员类型
        this.getstafftype()
    },
    
    methods: {
        // 职员列表
        async getstafflist() {
            let res = await stafflist(this.query)
            if (res.errCode == 10000) {
                this.tableData = res.data.list
                this.total = res.data.counts
            }
        },
        // 职员类型
        async getstafftype() {
            let res = await stafftype()
            if (res.errCode == 10000) {
                this.type = res.data.list
            }
        },
        // 修改
        handleClick(data) {
            console.log(data);
            this.handleClickdata = JSON.parse(JSON.stringify(data))
            this.dialogVisible = true
        },
        isclose(val, isrefresh = false, editdata = {}) {
            this.dialogVisible = val
            this.handleClickdata = editdata
            if (isrefresh) {
                this.getstafflist()
            }
        },
        // 查询
        onSubmit() {
            this.getstafflist()
        },
        // 分页
        pagechange(val) {
            this.query = val
            this.getstafflist()
        },
        
    }
}
</script>

<style lang="less" scoped>
.header {
    display: flex;
    position: relative;
    padding: 0 10px;
    height: 50px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    color: #427ff4;
    font-size: 16px;
}

.top {
    padding: 0 30px;
}

</style>